<template>
  <div class='container'>
    <Search v-model="keyword" placeholder="宝贝搜索" @keyup.enter.native="search"></Search>
    <div v-for="(item,key) in tabs" :key="key" v-show="tabIndex==key">
      <Good v-for="(good,k) in item.list" :key="k" :info="good"></Good>
    </div>
    <p class='loading' style="color:#fe6325">{{loadingTxt}}</p>
    <p class="c_fcopyright">© 2020 鱼米之乡  <a href="http://beian.miit.gov.cn">粤ICP备19089756号-1</a> </p>
    <MyTabbar></MyTabbar>
  </div>
</template>

<script>
import Good from "../components/Good.vue";
import { Search ,Toast} from 'mint-ui'
import axios from "axios";
import MyTabbar from "../components/MyTabbar.vue";
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  components: {
    Good,Search,MyTabbar
  },
  data() {
      return {
        loadingTxt: '加载中...',
        loading: false,
        keyword: '',
        isNewKeyword: false,
        tabIndex: 0,
        tabs: [
          {
            id:6708,
            name: '导购',
            page: 1,
            list: [],
          }
        ]
      }
  },
  methods: {
    // 搜索框 获取值
    search() {
      this.isNewKeyword = true;
      this.getGoods();
    },
    getbottom(){
      let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
      let clientHeight = document.documentElement.clientHeight || document.body.clientHeight;
      let scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
      let numHeight = scrollTop + clientHeight;
      if( (scrollHeight > clientHeight) && (numHeight > scrollHeight - 20) && !this.loading){
        this.getGoods();
      }
    },
    clickTab(key){
      this.tabIndex = key;
      if(!this.tabs[key].list.length) this.getGoods();
    },
    getGoods(){
      if(this.loading) return ;
      this.loadingTxt = '加载中...';
      this.loading = true;
      var _this = this;
      let key = this.tabIndex;
      let page = this.tabs[key].page;
      axios.get('/taobao/dGmaterialOptional?page=' + page + '&keyword=' + this.keyword).then(function(res){
        _this.loadingTxt = '';
        if(res.data.code !== 0){
          Toast(res.data.message);
          return ;
        }
        if(!res.data.data.length){
           if(_this.tabs[key].list.length){
            _this.loadingTxt = '无更多结果了';
           }else{
            Toast('查无商品，建议您换个词搜索');
            return;
           }
        }
        
        _this.loading = false;;
        _this.tabs[key].page++;
        _this.tabIndex = key;

        if(_this.isNewKeyword){
          _this.tabs[key].list =res.data.data;
          _this.isNewKeyword = false;
          return;
        }

        _this.tabs[key].list = _this.tabs[key].list.concat(res.data.data)
      });
    },
    setRem() {
      var docEl = document.documentElement;
      var clientWidth = docEl.clientWidth;
      if (!clientWidth) {
          return;
      }
      docEl.style.fontSize = 145 * (clientWidth / 1080) + 'px';
    }
  },
  created() {
    this.keyword = this.$route.query.keyword;
    this.getGoods();
  },
  beforeMount(){
    this.setRem();
  },
  mounted(){
    window.addEventListener('scroll', this.getbottom);
  },
  destroyed() { 
      window.removeEventListener('scroll', this.getbottom);
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

.mint-search{
    height: 10%;
}
.mint-searchbar {
    background-color: #fe6325;
}
.mint-searchbar-inner {    
    height: 0.4rem;
}
.mint-searchbar-cancel {
    color: white;
    font-size: 0.3rem;
}


.c_fcopyright {
    font-size: 14px;
    color: #bcbcbc;
    margin-top: 16px;
    text-align: center;
}
.c_fcopyright a {
    font-size: 12px;
    color: #a4a4a4;
    text-decoration: none;
}
</style>